<template>
  <div class="box">
    <div class="news-head">
      <div class="title">
        <span class="mui-icon mui-icon-search" v-show="showFlag=true"></span>
        <span class="mui-icon mui-icon-bars" v-show="showFlag?false:true"></span>
      </div>
    </div>

    <div class="news-box mui-content mui-scroll-wrapper" id="news-box">
      <div class="mui-scroll">
        <ul class="mui-table-view mui-table-view-chevron">
          <li
            class="mui-table-view-cell mui-media"
            v-for="(item,index) in newsList"
            :key="item.newsId"
          >
            <!-- 需要传值时  :to="'/home/newsDetail/' + item.id"-->
            <!-- <router-link :to="'/home/newsDetail'+ item.newsId" tag="div"> -->
            <router-link to="/home/newsDetail" tag="div">
              <img class="mui-media-object mui-pull-left" :src="item.src">
              <div class="mui-media-body">
                <h1 class="title mui-ellipsis">{{index}}{{item.title}}</h1>
                <div class="publish">
                  <span class="time">发表时间: {{ item.time }}</span>
                  <span class="count">点击：{{ item.count }}次</span>
                </div>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import mui from "../../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {
      title: "新闻",
      downTimerId: "",
      upTimerId: "",
      // data里的img src 需要用require()不然webpack不会打包
      newsList: [
        {
          newsId: "n001",
          title: "以新的更大作为奋力开创广东改革发展新局面",
          time: "2019-03-07 16:10:50",
          count: "1000",
          src: require("../../../static/images/image1.jpg")
        },
        {
          newsId: "n002",
          title: "集中资源优势推进大湾区建设 形成更多“一策三地”创新举措",
          time: "2019-03-07 16:10:50",
          count: "200",
          src: require("../../../static/images/image2.jpg")
        },
        {
          newsId: "n003",
          title: "推进港澳居民到内地发展便利措施",
          time: "2019-03-07 16:10:50",
          count: "100",
          src: require("../../../static/images/image3.jpg")
        },
        {
          newsId: "n004",
          title: "以新的更大作为奋力开创广东改革发展新局面",
          time: "2019-03-07 16:10:50",
          count: "1000",
          src: require("../../../static/images/image1.jpg")
        },
        {
          newsId: "n005",
          title: "集中资源优势推进大湾区建设 形成更多“一策三地”创新举措",
          time: "2019-03-07 16:10:50",
          count: "200",
          src: require("../../../static/images/image2.jpg")
        },
        {
          newsId: "n006",
          title: "推进港澳居民到内地发展便利措施",
          time: "2019-03-07 16:10:50",
          count: "100",
          src: require("../../../static/images/image3.jpg")
        },
        {
          newsId: "n007",
          title: "以新的更大作为奋力开创广东改革发展新局面",
          time: "2019-03-07 16:10:50",
          count: "1000",
          src: require("../../../static/images/image1.jpg")
        },
        {
          newsId: "n008",
          title: "集中资源优势推进大湾区建设 形成更多“一策三地”创新举措",
          time: "2019-03-07 16:10:50",
          count: "200",
          src: require("../../../static/images/image2.jpg")
        },
        {
          newsId: "n009",
          title: "推进港澳居民到内地发展便利措施",
          time: "2019-03-07 16:10:50",
          count: "100",
          src: require("../../../static/images/image3.jpg")
        }
      ],
      downList: [
        {
          newsId: "n0010",
          title: "为建设更加美好的地球家园贡献智慧力量",
          time: "2019-03-27 14:10:50",
          count: "20",
          src: require("../../../static/images/image4.jpg")
        },
        {
          newsId: "n0011",
          title: "以新的更大作为奋力开创广东改革发展新局面",
          time: "2019-03-27 16:10:50",
          count: "1000",
          src: require("../../../static/images/image5.jpg")
        },
        {
          newsId: "n0012",
          title: "集中资源优势推进大湾区建设 形成更多“一策三地”创新举措",
          time: "2019-03-27 16:10:50",
          count: "200",
          src: require("../../../static/images/image6.jpg")
        },
        {
          newsId: "n0013",
          title: "推进港澳居民到内地发展便利措施",
          time: "2019-03-27 16:10:50",
          count: "100",
          src: require("../../../static/images/image7.jpg")
        }
      ],
      upList: [
        {
          newsId: "n0014",
          title: "以新的更大作为奋力开创广东改革发展新局面",
          time: "2019-02-27 16:10:50",
          count: "1000",
          src: require("../../../static/images/image8.jpg")
        },
        {
          newsId: "n0015",
          title: "集中资源优势推进大湾区建设 形成更多“一策三地”创新举措",
          time: "2019-02-27 16:10:50",
          count: "200",
          src: require("../../../static/images/image9.jpg")
        },
        {
          newsId: "n0016",
          title: "推进港澳居民到内地发展便利措施",
          time: "2019-02-27 16:10:50",
          count: "100",
          src: require("../../../static/images/image10.jpg")
        }
      ],
      downIndex: 0,
      upIndex: 0,
      pullRefresh:{
        container: ".news-box", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
        down: {
          height: 50, //可选,默认50.触发下拉刷新拖动距离,
          auto: true,//可选,默认false.首次加载自动下拉刷新一次
          contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
          contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
          contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
          callback: this.downPullfresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
        },
        up: {
          height: 50, //可选,默认50.触发上拉刷新拖动距离,
          // auto: true,//可选,默认false.首次加载自动上拉刷新一次
          contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
          contentnomore: "没有更多数据了", //可选，请求完毕若没有更多数据时显示的提醒内容；
          callback: this.upPullfresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
        }
      }
    };
  },
  created() {
    this.showTitle(this.title);
    this.$nextTick(()=>{
      mui.init({
      pullRefresh: this.pullRefresh
    });
    })
  },
  mounted() {
    this.$nextTick(()=>{
      mui.init({
      pullRefresh: this.pullRefresh
    });
    })
  },
  methods: {
    showTitle(title) {
      this.$emit("getTitle", title);
    },
    downPullfresh() {
      clearTimeout(this.downTimerId);
      // 发起http请求获取数据，获取更多数据，拼接到原数组之前
      // 判断是否还有新新数据，没有则提示没有数据
      if (this.downIndex <= 0) {
        var downTimerId = setTimeout(() => {
          var res = this.downList;
          var oldList = this.newsList;
          // array1.concat(array2) 数组拼接，返回拼接好的新数组，concat前面的数组，新数组也在前面
          this.newsList = res.concat(oldList);
          this.downIndex += 1;
          mui.toast("新加载4条新闻");
          mui(".news-box")
            .pullRefresh()
            .endPulldownToRefresh();
        }, 1500);
      } else {
        var downTimerId = setTimeout(() => {
          mui.toast("已无最新消息");
          // mui('#refreshContainer').pullRefresh().endPulldown(); 文档的方法会报错
          mui(".news-box")
            .pullRefresh()
            .endPulldownToRefresh(true);
        }, 1500);
      }
    },
    upPullfresh() {
      clearTimeout(this.upTimerId);
      if (this.upIndex <= 0) {
        var upTimerId = setTimeout(() => {
          var res = this.upList;
          var oldList = this.newsList;
          this.newsList = oldList.concat(res);
          this.upIndex += 1;
          mui.toast("加载3条新闻");
          mui(".news-box")
            .pullRefresh()
            .endPullupToRefresh();
        }, 1500);
      } else {
        var upTimerId = setTimeout(() => {
          mui.toast("没有更多消息了");
          mui(".news-box")
            .pullRefresh()
            .endPullupToRefresh(true);
        }, 1500);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$baseColor: #26a2ff;
.mui-scroll-wrapper {
  top: 40px;
  bottom: 50px;
  overflow-y: auto;
}
.news-head {
  .title {
    span {
      position: fixed;
      right: 15px;
      top: 7px;
      z-index: 999;
      color: #fff;
    }
  }
  .mui-search {
    padding: 0 10px;
    input {
      background: #fff;
    }
  }
}
.mui-table-view {
  overflow-y: auto;
  .mui-table-view-cell {
    padding: 10px 15px;
    .mui-media-body {
      .title {
        font-size: 14px;
        color: #000;
        font-weight: 400;
      }
      .publish {
        color: $baseColor;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        // .time{
        //     float: left;
        // }
        // .count {
        //     float: right;
        // }
      }
    }
  }
}
</style>
